<template>
    <div class='news-list'>
        <public-head>
            <span>家政服务</span>
        </public-head>
        <ul v-if="newsLists.length">
            <router-link :to="{path:'/housekeep/keepdetail?settingId=' + list.settingId}" tag="li" v-for="(list,index) in newsLists" :key="list.settingId">
                <!--<div class="left">-->
                    <!--<img :src="list.img">-->
                <!--</div>-->
                <div class="right">
                  <div class="container" v-html="list.name">
                  </div>
                </div>
            </router-link>
        </ul>
        <noitem v-else>
            <p slot="tip">暂无服务消息</p>
        </noitem>
        <loading v-if="is_loading"></loading>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            newsLists: [], // 新闻列表
            listQuery: {
              name: undefined,
              key:"add"
            },
        }
    },

    created() {
        this.isLoading(true)
        // fetch newslist 
        this.axios.post(root + '/api/wx/ad/list',{key:"house"}).then((res) => {
            this.isLoading(false)
            this.newsLists = res.data.data
        })
    },
    methods: {
        ...mapActions(['isLoading'])
    },
    computed: {
        ...mapState(['is_loading'])
    }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin.less';
.news-list {
    .init;
    li {
        display: -webkit-flex;
        background: #fff;
        padding: .24rem .29rem;
        box-shadow: 0 3px 5px 0 #d0d0d0;
        margin-top: .2rem;
        .left {
            .wh(1.52rem, 1.52rem);
            margin-right: .29rem;
            img {
                .wh(100%, 100%);
                border-radius: 2px;
            }
        }
        .right {
            flex: 1;
            .ft(.24rem);
            .title {
                width: 5rem;
                color: #404040;
                line-height: 0.3rem;
                margin-bottom: .18rem;
                margin-top: .1rem;
                .textoverflow;
            }
            .introduce {
                color: #999;
                line-height: .45rem;
            }
        }
    }
}
</style>
